'use strict';

define(function(require, exports, module) {
	var React = require('react');
	var $ = require('jquery');
	var Highcharts = require('highcharts');
	
	//接口柱状图
	module.exports = React.createClass({
		getInitialState: function() {
			var state_data = [];
		
			if(!this.props.data){
				$.ajax({
					url:this.props.url,
					data:{},
					dataType:'json',
					type:'post',
					success:function(data){
						state_data = data;
					},
					error:function(xhr,status,err){
						console.error('获取数据异常',status,err);
					}
				});
			}else{
				state_data = this.props.data;
			}

		    return {
		    	data: state_data
		    };
		},
		componentDidMount:function(){
			if(this.props.data){
				var data_list = this.props.data;
				var value_array = [];

				for(var j=0;j<data_list.length;j++){
					value_array.push([data_list[j].time,data_list[j].value]);
				}

				new Highcharts.Chart({
					colors: [
						'#058DC7',
						'#50B432',
						'#ED561B',
						'#DDDF00',
						'#24CBE5',
						'#64E572',
						'#FF9655',
						'#FFF263', 
						'#6AF9C4'
					], 
			        chart: {
			            renderTo: this.props.id_name,
			            polar: true,
			            type: 'column'
			        },

			        title: {
			            text: this.props.title
			        },
			        subtitle: {
			            text: ''
			        },
			        xAxis: {
			            type: 'category',
			            labels: {
			                rotation: -45,
			                style: {
			                    fontSize: '13px',
			                    fontFamily: 'Verdana, sans-serif'
			                }
			            }
			        },
			        yAxis: {
			            min: 0,
			            title: {
			                text: this.props.yName + this.props.yUnit
			            }
			        },
			        legend: {
			            enabled: false
			        },
			        tooltip: {
						formatter:function(){
							return this.x+'时：<b>'+Highcharts.numberFormat(this.y,0,'.',',')+'</b>次';
						}
			        },
			        series: [{
			            name: 'Population',
			            data: value_array,
			            dataLabels: {
			                enabled: true,
			                rotation: -90,
			                color: '#FFFFFF',
			                align: 'right',
			                format: '{point.y:.1f}', // one decimal
			                y: 10, // 10 pixels down from the top
			                style: {
			                    fontSize: '13px',
			                    fontFamily: 'Verdana, sans-serif'
			                }
			            }
			        }]
		    
			    });
			}
		
		},
		render:function(){
			return (
					<div className={this.props.className} id={this.props.id_name}></div>
				);
		}
	});

});